<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>全局组件</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <style>
            .demo{
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <!-- 第三步：使用组件-编写组件标签 -->
             <h1>{{msg}}</h1>
             <hello></hello>
        </div>
        <hr>
        <div id="root2">
            <h1>root2实例</h1>
            <hello></hello>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //阻止生产提示

            //第一步：创建hello组件，使用全局注册
            const hello = Vue.extend({
                template:`
                    <div>
                        <h1>hello!{{name}}</h1>
                    </div>
                `,
                data() {
                    return {
                        name:'Tom'
                    }
                },
            })

            //第二步：注册成全局组件，前面的hello是使用时的名字，后面的是创建时的名字
            Vue.component('hello',hello)

            const vm =  new Vue({
                el:'#root',
                data:{
                    msg:'你好！'
                }
            })

            const vm2 =  new Vue({
                el:'#root2',
            })

        </script>

        
    </body>
</html>